From f58016ba9d579a94a65e012aeb1188afdfcfd0e9 Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Wed, 1 Mar 2023 08:22:15 +0100 Subject: [PATCH] Fine tune the calendar selection callback --- assets/js/utils/calendar_default_view.js | 222 +++++++++++------------ assets/js/utils/calendar_table_view.js | 161 +++++++++------- 2 files changed, 204 insertions(+), 179 deletions(-) diff --git a/assets/js/utils/calendar_default_view.js b/assets/js/utils/calendar_default_view.js index 69b6984d..741ccb6c 100755 --- a/assets/js/utils/calendar_default_view.js +++ b/assets/js/utils/calendar_default_view.js @@ -136,10 +136,10 @@ App.Utils.CalendarDefaultView = (function () { // Set the start and end datetime of the appointment. startMoment = moment(appointment.start_datetime); - $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate( startMoment.toDate()); + $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate(startMoment.toDate()); endMoment = moment(appointment.end_datetime); - $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate( endMoment.toDate()); + $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate(endMoment.toDate()); const customer = appointment.customer; $appointmentsModal.find('#customer-id').val(appointment.id_users_customer); @@ -176,10 +176,10 @@ App.Utils.CalendarDefaultView = (function () { // Apply unavailability data to dialog. $unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); - $unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate( startMoment.toDate()); + $unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate(startMoment.toDate()); $unavailabilitiesModal.find('#unavailability-id').val(unavailability.id); $unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); - $unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate( endMoment.toDate()); + $unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate(endMoment.toDate()); $unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes); $unavailabilitiesModal.modal('show'); } @@ -333,7 +333,7 @@ App.Utils.CalendarDefaultView = (function () { function getCalendarHeight() { const result = window.innerHeight - $footer.outerHeight() - $header.outerHeight() - $calendarToolbar.outerHeight() - 60; // 60 for fine tuning - return result > 500 ? result : 500; // Minimum height is 500px + return result > 800 ? result : 800; // Minimum height is 800px } /** @@ -1016,6 +1016,104 @@ App.Utils.CalendarDefaultView = (function () { } } + function onSelect(info) { + if (info.allDay) { + return; + } + + const isProviderDisplayed = + $selectFilterItem.find('option:selected').attr('type') === FILTER_TYPE_PROVIDER; + + const buttons = [ + { + text: lang('unavailability'), + click: (event, messageModal) => { + $('#insert-unavailability').trigger('click'); + + if (isProviderDisplayed) { + $('#unavailability-provider').val($selectFilterItem.val()); + } else { + $('#unavailability-provider option:first').prop('selected', true); + } + + $('#unavailability-provider').trigger('change'); + + $('#unavailability-start')[0]._flatpickr.setDate(info.start); + + $('#unavailability-end')[0]._flatpickr.setDate(info.end); + + messageModal.dispose(); + } + }, + { + text: lang('appointment'), + click: (event, messageModal) => { + $('#insert-appointment').trigger('click'); + + // Preselect service & provider. + let service; + + if (isProviderDisplayed) { + const provider = vars('available_providers').find( + (availableProvider) => + Number(availableProvider.id) === Number($selectFilterItem.val()) + ); + + if (provider) { + service = vars('available_services').find( + (availableService) => provider.services.indexOf(availableService.id) !== -1 + ); + + if (service) { + $appointmentsModal.find('#select-service').val(service.id); + } + } + + if (!$appointmentsModal.find('#select-service').val()) { + $('#select-service option:first').prop('selected', true); + } + + $appointmentsModal.find('#select-service').trigger('change'); + + if (provider) { + $appointmentsModal.find('#select-provider').val(provider.id); + } + + if (!$appointmentsModal.find('#select-provider').val()) { + $appointmentsModal.find('#select-provider option:first').prop('selected', true); + } + + $appointmentsModal.find('#select-provider').trigger('change'); + } else { + service = vars('available_services').find( + (availableService) => + Number(availableService.id) === Number($selectFilterItem.val()) + ); + + if (service) { + $appointmentsModal.find('#select-service').val(service.id).trigger('change'); + } + } + + // Preselect time + $('#start-datetime')[0]._flatpickr.setDate(info.start); + $('#end-datetime')[0]._flatpickr.setDate(App.Pages.Calendar.getSelectionEndDate(info)); + + messageModal.dispose(); + } + } + ]; + + App.Utils.Message.show(lang('add_new_event'), lang('what_kind_of_event'), buttons); + + $('#message-modal .modal-footer') + .addClass('justify-content-between') + .find('.btn') + .css('width', 'calc(50% - 10px)'); + + return false; + } + /** * Calendar "View Render" Callback * @@ -1501,128 +1599,26 @@ App.Utils.CalendarDefaultView = (function () { slotLabelFormat: slotTimeFormat, allDayContent: lang('all_day'), dayHeaderFormat: columnFormat, + selectable: true, + selectMirror: true, headerToolbar: { left: 'prev,next today', center: 'title', right: 'timeGridDay,timeGridWeek,dayGridMonth' }, - - // Selectable - selectable: true, - selectMirror: true, - select: (info) => { - if (info.allDay) { - return; - } - - const isProviderDisplayed = - $selectFilterItem.find('option:selected').attr('type') === FILTER_TYPE_PROVIDER; - - const buttons = [ - { - text: lang('close'), - click: (event, messageModal) => { - messageModal.dispose(); - } - }, - { - text: lang('unavailability'), - click: (event, messageModal) => { - $('#insert-unavailability').trigger('click'); - - if (isProviderDisplayed) { - $('#unavailability-provider').val($selectFilterItem.val()); - } else { - $('#unavailability-provider option:first').prop('selected', true); - } - - $('#unavailability-provider').trigger('change'); - - $('#unavailability-start')[0]._flatpickr.setDate( info.start); - - $('#unavailability-end')[0]._flatpickr.setDate( info.end); - - messageModal.dispose(); - } - }, - { - text: lang('appointment'), - click: (event, messageModal) => { - $('#insert-appointment').trigger('click'); - - // Preselect service & provider. - let service; - - if (isProviderDisplayed) { - const provider = vars('available_providers').find( - (availableProvider) => - Number(availableProvider.id) === Number($selectFilterItem.val()) - ); - - if (provider) { - service = vars('available_services').find( - (availableService) => provider.services.indexOf(availableService.id) !== -1 - ); - - if (service) { - $appointmentsModal.find('#select-service').val(service.id); - } - } - - if (!$appointmentsModal.find('#select-service').val()) { - $('#select-service option:first').prop('selected', true); - } - - $appointmentsModal.find('#select-service').trigger('change'); - - if (provider) { - $appointmentsModal.find('#select-provider').val(provider.id); - } - - if (!$appointmentsModal.find('#select-provider').val()) { - $appointmentsModal.find('#select-provider option:first').prop('selected', true); - } - - $appointmentsModal.find('#select-provider').trigger('change'); - } else { - service = vars('available_services').find( - (availableService) => - Number(availableService.id) === Number($selectFilterItem.val()) - ); - - if (service) { - $appointmentsModal.find('#select-service').val(service.id).trigger('change'); - } - } - - // Preselect time - $('#start-datetime')[0]._flatpickr.setDate( info.start); - $('#end-datetime')[0]._flatpickr.setDate( App.Pages.Calendar.getSelectionEndDate(info)); - - messageModal.dispose(); - } - } - ]; - - App.Utils.Message.show(lang('add_new_event'), lang('what_kind_of_event'), buttons); - - return false; - }, - buttonText: { today: lang('today'), day: lang('day'), week: lang('week'), month: lang('month') }, - - // Calendar events need to be declared on initialization. windowResize: onWindowResize, datesSet: onDatesSet, dateClick: onDateClick, eventClick: onEventClick, eventResize: onEventResize, - eventDrop: onEventDrop + eventDrop: onEventDrop, + select: onSelect }); fullCalendar.render(); @@ -1692,10 +1688,10 @@ App.Utils.CalendarDefaultView = (function () { // Set the start and end datetime of the appointment. const startDatetimeMoment = moment(appointment.start_datetime); - $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate( startDatetimeMoment.toDate()); + $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate(startDatetimeMoment.toDate()); const endDatetimeMoment = moment(appointment.end_datetime); - $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate( endDatetimeMoment.toDate()); + $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate(endDatetimeMoment.toDate()); const customer = appointment.customer; $appointmentsModal.find('#customer-id').val(appointment.id_users_customer); diff --git a/assets/js/utils/calendar_table_view.js b/assets/js/utils/calendar_table_view.js index 5bc101c6..62bd573d 100755 --- a/assets/js/utils/calendar_table_view.js +++ b/assets/js/utils/calendar_table_view.js @@ -46,7 +46,7 @@ App.Utils.CalendarTableView = (function () { const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; const startDate = moment(currentDate).subtract(1, 'days'); const endDate = startDate.clone().add(dayInterval - 1, 'days'); - $selectDate[0]._flatpickr.setDate( startDate.toDate()); + $selectDate[0]._flatpickr.setDate(startDate.toDate()); createView(startDate.toDate(), endDate.toDate()); }); @@ -55,7 +55,7 @@ App.Utils.CalendarTableView = (function () { const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; const startDate = moment(currentDate).add(1, 'days'); const endDate = startDate.clone().add(dayInterval - 1, 'days'); - $selectDate[0]._flatpickr.setDate( startDate.toDate()); + $selectDate[0]._flatpickr.setDate(startDate.toDate()); createView(startDate.toDate(), endDate.toDate()); }); @@ -209,10 +209,10 @@ App.Utils.CalendarTableView = (function () { // Set the start and end datetime of the appointment. startMoment = moment(appointment.start_datetime); - $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate( startMoment.toDate()); + $appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate(startMoment.toDate()); endMoment = moment(appointment.end_datetime); - $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate( endMoment.toDate()); + $appointmentsModal.find('#end-datetime')[0]._flatpickr.setDate(endMoment.toDate()); const customer = appointment.customer; $appointmentsModal.find('#customer-id').val(appointment.id_users_customer); @@ -249,10 +249,10 @@ App.Utils.CalendarTableView = (function () { // Apply unavailability data to dialog. $unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); - $unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate( startMoment.toDate()); + $unavailabilitiesModal.find('#unavailability-start')[0]._flatpickr.setDate(startMoment.toDate()); $unavailabilitiesModal.find('#unavailability-id').val(unavailability.id); $unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); - $unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate( endMoment.toDate()); + $unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate(endMoment.toDate()); $unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes); $unavailabilitiesModal.modal('show'); @@ -389,7 +389,7 @@ App.Utils.CalendarTableView = (function () { const endDate = moment(startDate).add(parseInt($selectFilterItem.val()) - 1, 'days').toDate(); createView(startDate, endDate); } - }); + }); const providers = vars('available_providers').filter( (provider) => @@ -633,7 +633,7 @@ App.Utils.CalendarTableView = (function () { */ function getCalendarHeight() { const result = window.innerHeight - $footer.outerHeight() - $header.outerHeight() - 60; // 60 for fine tuning - return result > 500 ? result : 500; // Minimum height is 500px + return result > 800 ? result : 800; // Minimum height is 800px } function createCalendar($providerColumn, goToDate, provider) { @@ -690,60 +690,13 @@ App.Utils.CalendarTableView = (function () { slotLabelFormat: slotTimeFormat, allDayContent: lang('all_day'), dayHeaderFormat: columnFormat, + selectable: true, + selectHelper: true, headerToolbar: { left: 'listDay,timeGridDay', center: '', right: '' }, - // Selectable - selectable: true, - selectHelper: true, - select: (info) => { - if (info.allDay) { - return; - } - - $('#insert-appointment').trigger('click'); - - // Preselect service & provider. - const $providerColumn = $(info.jsEvent.target).parents('.provider-column'); - const providerId = $providerColumn.data('provider').id; - - const provider = vars('available_providers').find( - (provider) => Number(provider.id) === Number(providerId) - ); - - const service = vars('available_services').find( - (service) => provider.services.indexOf(service.id) !== -1 - ); - - if (service) { - $selectService.val(service.id); - } - - if (!$selectService.val()) { - $selectService.find('option:first').prop('selected', true); - } - - $selectService.trigger('change'); - - if (provider) { - $selectProvider.val(provider.id); - } - - if (!$selectProvider.val()) { - $('#select-provider option:first').prop('selected', true); - } - - $selectProvider.trigger('change'); - - // Preselect time - $('#start-datetime')[0]._flatpickr.setDate( info.start); - $('#end-datetime')[0]._flatpickr.setDate( App.Pages.Calendar.getSelectionEndDate(info)); - - return false; - }, - buttonText: { today: lang('today'), day: lang('day'), @@ -752,12 +705,10 @@ App.Utils.CalendarTableView = (function () { timeGridDay: lang('calendar'), listDay: lang('list') }, - - // Calendar events need to be declared on initialization. eventClick: onEventClick, eventResize: onEventResize, - eventDrop: onEventDrop - // datesSet: onDatesSet + eventDrop: onEventDrop, + select: onSelect }); fullCalendar.render(); @@ -771,10 +722,6 @@ App.Utils.CalendarTableView = (function () { }).prependTo($providerColumn); } - // function onDatesSet() { - // $(element).fullCalendar('option', 'height', getCalendarHeight()); - // } - function createNonWorkingHours($calendar, provider) { const workingPlan = JSON.parse(provider.settings.working_plan); const workingPlanExceptions = JSON.parse(provider.settings.working_plan_exceptions) || {}; @@ -1708,6 +1655,88 @@ App.Utils.CalendarTableView = (function () { } } + function onSelect(info) { + if (info.allDay) { + return; + } + + const $providerColumn = $(info.jsEvent.target).parents('.provider-column'); + + const providerId = $providerColumn.data('provider').id; + + const buttons = [ + { + text: lang('unavailability'), + click: (event, messageModal) => { + $('#insert-unavailability').trigger('click'); + + if (providerId) { + $('#unavailability-provider').val(providerId); + } else { + $('#unavailability-provider option:first').prop('selected', true); + } + + $('#unavailability-provider').trigger('change'); + + $('#unavailability-start')[0]._flatpickr.setDate(info.start); + + $('#unavailability-end')[0]._flatpickr.setDate(info.end); + + messageModal.dispose(); + } + }, + { + text: lang('appointment'), + click: (event, messageModal) => { + $('#insert-appointment').trigger('click'); + + const provider = vars('available_providers').find( + (provider) => Number(provider.id) === Number(providerId) + ); + + const service = vars('available_services').find( + (service) => provider.services.indexOf(service.id) !== -1 + ); + + if (service) { + $selectService.val(service.id); + } + + if (!$selectService.val()) { + $selectService.find('option:first').prop('selected', true); + } + + $selectService.trigger('change'); + + if (provider) { + $selectProvider.val(provider.id); + } + + if (!$selectProvider.val()) { + $('#select-provider option:first').prop('selected', true); + } + + $selectProvider.trigger('change'); + + // Preselect time + $('#start-datetime')[0]._flatpickr.setDate(info.start); + $('#end-datetime')[0]._flatpickr.setDate(App.Pages.Calendar.getSelectionEndDate(info)); + + messageModal.dispose(); + } + } + ]; + + App.Utils.Message.show(lang('add_new_event'), lang('what_kind_of_event'), buttons); + + $('#message-modal .modal-footer') + .addClass('justify-content-between') + .find('.btn') + .css('width', 'calc(50% - 10px)'); + + return false; + } + /** * Set Table Calendar View * @@ -1763,7 +1792,7 @@ App.Utils.CalendarTableView = (function () { addEventListeners(); - // Hide Google Calendar Sync buttons cause they can not be used within this view. + // Hide Google Calendar Sync buttons because they can not be used within this view. $('#enable-sync, #google-sync').hide(); }