Add logic for navigating back to the previously available date

This commit is contained in:
Alex Tselegidis 2024-02-18 10:59:24 +01:00
parent 6fecbc7cd7
commit 609dc93e1e
2 changed files with 26 additions and 3 deletions

View file

@ -233,8 +233,9 @@ App.Http.Booking = (function () {
* @param {Number} providerId The selected provider ID. * @param {Number} providerId The selected provider ID.
* @param {Number} serviceId The selected service ID. * @param {Number} serviceId The selected service ID.
* @param {String} selectedDateString Y-m-d value of the selected date. * @param {String} selectedDateString Y-m-d value of the selected date.
* @param {Number} monthChangeStep Whether to add or subtract months.
*/ */
function getUnavailableDates(providerId, serviceId, selectedDateString) { function getUnavailableDates(providerId, serviceId, selectedDateString, monthChangeStep) {
if (processingUnavailableDates) { if (processingUnavailableDates) {
return; return;
} }
@ -275,7 +276,7 @@ App.Http.Booking = (function () {
const unavailableDates = []; const unavailableDates = [];
while (startOfMonthMoment.isSameOrBefore(endOfMonthMoment)) { while (startOfMonthMoment.isSameOrBefore(endOfMonthMoment)) {
unavailableDates.push(startOfMonthMoment.format('YYYY-MM-DD')); unavailableDates.push(startOfMonthMoment.format('YYYY-MM-DD'));
startOfMonthMoment.add(1, 'days'); // Move to the next day startOfMonthMoment.add(monthChangeStep, 'days'); // Move to the next day
} }
applyUnavailableDates(unavailableDates, searchedMonthStart, false); applyUnavailableDates(unavailableDates, searchedMonthStart, false);
searchedMonthStart = undefined; searchedMonthStart = undefined;
@ -287,7 +288,7 @@ App.Http.Booking = (function () {
const selectedDateMoment = moment(selectedDateString); const selectedDateMoment = moment(selectedDateString);
selectedDateMoment.add(1, 'month'); selectedDateMoment.add(1, 'month');
const nextSelectedDate = selectedDateMoment.format('YYYY-MM-DD'); const nextSelectedDate = selectedDateMoment.format('YYYY-MM-DD');
getUnavailableDates(providerId, serviceId, nextSelectedDate); getUnavailableDates(providerId, serviceId, nextSelectedDate, monthChangeStep);
return; return;
} }

View file

@ -49,6 +49,18 @@ App.Pages.Booking = (function () {
*/ */
let manageMode = vars('manage_mode') || false; let manageMode = vars('manage_mode') || false;
/**
* Detect the month step.
*
* @param previousDateTimeMoment
* @param nextDateTimeMoment
*
* @returns {Number}
*/
function detectDatepickerMonthChangeStep(previousDateTimeMoment, nextDateTimeMoment) {
return previousDateTimeMoment.isAfter(nextDateTimeMoment) ? -1 : 1;
}
/** /**
* Initialize the module. * Initialize the module.
*/ */
@ -104,6 +116,8 @@ App.Pages.Booking = (function () {
} }
monthTimeout = setTimeout(() => { monthTimeout = setTimeout(() => {
const previousMoment = moment(instance.selectedDates[0]);
const displayedMonthMoment = moment( const displayedMonthMoment = moment(
instance.currentYearElement.value + instance.currentYearElement.value +
'-' + '-' +
@ -111,16 +125,21 @@ App.Pages.Booking = (function () {
'-01', '-01',
); );
const monthChangeStep = detectDatepickerMonthChangeStep(previousMoment, displayedMonthMoment);
App.Http.Booking.getUnavailableDates( App.Http.Booking.getUnavailableDates(
$selectProvider.val(), $selectProvider.val(),
$selectService.val(), $selectService.val(),
displayedMonthMoment.format('YYYY-MM-DD'), displayedMonthMoment.format('YYYY-MM-DD'),
monthChangeStep,
); );
}, 500); }, 500);
}, },
onYearChange: (selectedDates, dateStr, instance) => { onYearChange: (selectedDates, dateStr, instance) => {
setTimeout(() => { setTimeout(() => {
const previousMoment = moment(instance.selectedDates[0]);
const displayedMonthMoment = moment( const displayedMonthMoment = moment(
instance.currentYearElement.value + instance.currentYearElement.value +
'-' + '-' +
@ -128,10 +147,13 @@ App.Pages.Booking = (function () {
'-01', '-01',
); );
const monthChangeStep = detectDatepickerMonthChangeStep(previousMoment, displayedMonthMoment);
App.Http.Booking.getUnavailableDates( App.Http.Booking.getUnavailableDates(
$selectProvider.val(), $selectProvider.val(),
$selectService.val(), $selectService.val(),
displayedMonthMoment.format('YYYY-MM-DD'), displayedMonthMoment.format('YYYY-MM-DD'),
monthChangeStep,
); );
}, 500); }, 500);
}, },