From 0cc51ed33cd25f2d10faf03efa90743bd8a49d32 Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Fri, 17 Nov 2023 09:42:57 +0100 Subject: [PATCH] Display the blocked periods to the calendar page (#432) --- application/controllers/Calendar.php | 5 +++ assets/js/utils/calendar_default_view.js | 14 ++++-- assets/js/utils/calendar_table_view.js | 55 +++++++++++++++++++++++- 3 files changed, 69 insertions(+), 5 deletions(-) diff --git a/application/controllers/Calendar.php b/application/controllers/Calendar.php index c11462c1..f587c7c4 100644 --- a/application/controllers/Calendar.php +++ b/application/controllers/Calendar.php @@ -598,6 +598,11 @@ class Calendar extends EA_Controller { $response['unavailabilities'] = array_values($response['unavailabilities']); } + // Add blocked periods to the response. + $start_date = request('start_date'); + $end_date = request('end_date'); + $response['blocked_periods'] = $this->blocked_periods_model->get_for_period($start_date, $end_date); + json_response($response); } catch (Throwable $e) diff --git a/assets/js/utils/calendar_default_view.js b/assets/js/utils/calendar_default_view.js index 12a5f7ed..f305a27f 100755 --- a/assets/js/utils/calendar_default_view.js +++ b/assets/js/utils/calendar_default_view.js @@ -382,6 +382,14 @@ App.Utils.CalendarDefaultView = (function () { $target.hasClass('fc-custom') && vars('privileges').appointments.edit === true ? '' : 'd-none'; displayDelete = $target.hasClass('fc-custom') && vars('privileges').appointments.delete === true ? 'me-2' : 'd-none'; // Same value at the time. + + let startDateTimeObject = info.event.start; + let endDateTimeObject = info.event.end || info.event.start; + + if (info.event.extendedProps.data) { + startDateTimeObject = new Date(info.event.extendedProps.data.start_datetime); + endDateTimeObject = new Date(info.event.extendedProps.data.end_datetime); + } $html = $('
', { 'html': [ @@ -391,7 +399,7 @@ App.Utils.CalendarDefaultView = (function () { }), $('', { 'text': App.Utils.Date.format( - moment(info.event.start).format('YYYY-MM-DD HH:mm:ss'), + moment(startDateTimeObject).format('YYYY-MM-DD HH:mm:ss'), vars('date_format'), vars('time_format'), true @@ -405,7 +413,7 @@ App.Utils.CalendarDefaultView = (function () { }), $('', { 'text': App.Utils.Date.format( - moment(info.event.end).format('YYYY-MM-DD HH:mm:ss'), + moment(endDateTimeObject).format('YYYY-MM-DD HH:mm:ss'), vars('date_format'), vars('time_format'), true @@ -1237,7 +1245,7 @@ App.Utils.CalendarDefaultView = (function () { backgroundColor: '#d65069', borderColor: '#d65069', textColor: '#ffffff', - editable: true, + editable: false, className: 'fc-blocked-period fc-unavailability', data: blockedPeriod }; diff --git a/assets/js/utils/calendar_table_view.js b/assets/js/utils/calendar_table_view.js index 2a26ab30..086abbc2 100755 --- a/assets/js/utils/calendar_table_view.js +++ b/assets/js/utils/calendar_table_view.js @@ -115,6 +115,9 @@ App.Utils.CalendarTableView = (function () { /** @var {Array} response.unavailabilities */ createUnavailabilities($providerColumn, response.unavailabilities); + // Add the blocked periods to the column. + createBlockedPeriods($providerColumn, response.blocked_periods); + // Add the provider breaks to the column. const workingPlan = JSON.parse(provider.settings.working_plan); const day = moment(date).format('dddd').toLowerCase(); @@ -619,6 +622,9 @@ App.Utils.CalendarTableView = (function () { // Add the unavailabilities to the column. /** @var {Array} events.unavailabilities */ createUnavailabilities($providerColumn, events.unavailabilities); + + // Add the blocked periods to the column. + createBlockedPeriods($providerColumn, events.blocked_periods); } /** @@ -932,6 +938,43 @@ App.Utils.CalendarTableView = (function () { $providerColumn.find('.calendar-wrapper').data('fullCalendar').addEventSource(calendarEventSource); } + + /** + * Create Blocked Period Events + * + * This method will add the blocked period on the table view. + * + * @param {jQuery} $providerColumn The provider column container. + * @param {Object[]} blockedPeriods Contains the blocked period data. + */ + function createBlockedPeriods($providerColumn, blockedPeriods) { + if (blockedPeriods.length === 0) { + return; + } + + const calendarEventSource = []; + + for (const index in blockedPeriods) { + const blockedPeriod = blockedPeriods[index]; + + const event = { + title: blockedPeriod.name, + start: moment(blockedPeriod.start_datetime).toDate(), + end: moment(blockedPeriod.end_datetime).toDate(), + allDay: true, + backgroundColor: '#d65069', + borderColor: '#d65069', + textColor: '#ffffff', + editable: false, + className: 'fc-blocked-period fc-unavailability', + data: blockedPeriod + }; + + calendarEventSource.push(event); + } + + $providerColumn.find('.calendar-wrapper').data('fullCalendar').addEventSource(calendarEventSource); + } /** * Create break events in the table view. @@ -1051,6 +1094,14 @@ App.Utils.CalendarTableView = (function () { displayDelete = $target.hasClass('fc-custom') && vars('privileges').appointments.delete === true ? '' : 'd-none'; // Same value at the time. + let startDateTimeObject = info.event.start; + let endDateTimeObject = info.event.end || info.event.start; + + if (info.event.extendedProps.data) { + startDateTimeObject = new Date(info.event.extendedProps.data.start_datetime); + endDateTimeObject = new Date(info.event.extendedProps.data.end_datetime); + } + $html = $('
', { 'html': [ $('', { @@ -1059,7 +1110,7 @@ App.Utils.CalendarTableView = (function () { }), $('', { 'text': App.Utils.Date.format( - moment(info.event.start).format('YYYY-MM-DD HH:mm:ss'), + moment(startDateTimeObject).format('YYYY-MM-DD HH:mm:ss'), vars('date_format'), vars('time_format'), true @@ -1073,7 +1124,7 @@ App.Utils.CalendarTableView = (function () { }), $('', { 'text': App.Utils.Date.format( - moment(info.event.end).format('YYYY-MM-DD HH:mm:ss'), + moment(endDateTimeObject).format('YYYY-MM-DD HH:mm:ss'), vars('date_format'), vars('time_format'), true