Fine tune the calendar selection callback
This commit is contained in:
Alex Tselegidis
parent
9e3611c547
commit
f58016ba9d
2 changed files with 204 additions and 179 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue