From d02e800c0f08a065ed90ed1a19f7e402717855ae Mon Sep 17 00:00:00 2001 From: Martin Renvoize Date: Thu, 25 Jul 2024 16:15:18 +0100 Subject: [PATCH] Bug 34440: Enforce lead/trail restrictions This patch adds rule enforcement into the user interface. When attempting to make a booking now, instead of just visually displaying the lead and trail period and highlighting when an overlap appears, we now block the ability to select a date when such an overlap case is found. --- .../prog/css/src/staff-global.scss | 12 ++++++ .../prog/js/modals/place_booking.js | 39 +++++++++++++++++-- 2 files changed, 47 insertions(+), 4 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index adc9470dc22..22d52bc7057 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -871,6 +871,18 @@ $dayTrailBackground: #fcdcb3 !default; &.trailRangeEnd { border-radius: 0 50px 50px 0; } + + &.leadDisable { + color: #aaa !important; /* Gray out the text */ + background: #f5f5f5 !important; /* Light background */ + cursor: not-allowed !important; + } + + &.trailDisable { + color: #aaa !important; /* Gray out the text */ + background: #f5f5f5 !important; /* Light background */ + cursor: not-allowed !important; + } } .input-warning { 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 bbb19aa899d..f5c92d0c53a 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js +++ b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js @@ -389,6 +389,7 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { periodPicker.config.disable.push(function dateDisable( date ) { + // set local copy of selectedDates let selectedDates = periodPicker.selectedDates; @@ -785,6 +786,7 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { instance, dayElem ) { + const date = dayElem.dateObj const currentDate = dayElem.dateObj .toISOString() .split("T")[0]; @@ -813,8 +815,8 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { ); const startDate = periodPicker.selectedDates[0] ? dayjs(periodPicker.selectedDates[0]).startOf( - "day" - ) + "day" + ) : null; const leadStart = startDate @@ -824,6 +826,8 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { const trailStart = hoverDate; const trailEnd = hoverDate.add(trailDays, "day"); + let leadDisable = false; + let trailDisable = false; periodPicker.calendarContainer .querySelectorAll(".flatpickr-day") .forEach(function (dayElem) { @@ -838,7 +842,7 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { dayElem.classList.toggle( "leadRange", elemDate.isSameOrAfter(leadStart) && - elemDate.isBefore(leadEnd) + elemDate.isBefore(leadEnd) ); dayElem.classList.toggle( "leadRangeEnd", @@ -851,17 +855,44 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { dayElem.classList.toggle( "trailRange", elemDate.isAfter(trailStart) && - elemDate.isSameOrBefore(trailEnd) + elemDate.isSameOrBefore(trailEnd) ); dayElem.classList.toggle( "trailRangeEnd", elemDate.isSame(trailEnd) ); + // If we're overlapping a disabled date, disable our hoverDate + if (dayElem.classList.contains("flatpickr-disabled")) { + if (elemDate.isSameOrAfter(leadStart) && elemDate.isBefore(leadEnd)) { + leadDisable = true; + } + if (elemDate.isAfter(trailStart) && + elemDate.isSameOrBefore(trailEnd)) { + trailDisable = true; + } + } + dayElem.classList.remove("leadDisable"); + dayElem.classList.remove("trailDisable"); + dayElem.removeEventListener('click', disableClick, true); }); + + if (leadDisable) { + target.classList.add("leadDisable"); + } + if (trailDisable) { + target.classList.add("trailDisable"); + } + if (trailDisable || leadDisable) { + target.addEventListener('click', disableClick, true); + } } } ); + function disableClick(e) { + e.stopImmediatePropagation(); + } + // Enable flatpickr now we have date function populated periodPicker.redraw(); -- 2.45.2