maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Fine tune the calendar selection callback

Browse source
This commit is contained in:
Alex Tselegidis 2023-03-01 08:22:15 +01:00
parent 9e3611c547
commit f58016ba9d
2 changed files with 204 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

222
assets/js/utils/calendar_default_view.js
View file

@ -136,10 +136,10 @@ App.Utils.CalendarDefaultView = (function () {
// Set the start and end datetime of the appointment. // Set the start and end datetime of the appointment.
startMoment = moment(appointment.start_datetime); 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); 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; const customer = appointment.customer;
$appointmentsModal.find('#customer-id').val(appointment.id_users_customer); $appointmentsModal.find('#customer-id').val(appointment.id_users_customer);
@ -176,10 +176,10 @@ App.Utils.CalendarDefaultView = (function () {
// Apply unavailability data to dialog. // Apply unavailability data to dialog.
$unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); $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-id').val(unavailability.id);
$unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); $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.find('#unavailability-notes').val(unavailability.notes);
$unavailabilitiesModal.modal('show'); $unavailabilitiesModal.modal('show');
} }
@ -333,7 +333,7 @@ App.Utils.CalendarDefaultView = (function () {
function getCalendarHeight() { function getCalendarHeight() {
const result = const result =
window.innerHeight - $footer.outerHeight() - $header.outerHeight() - $calendarToolbar.outerHeight() - 60; // 60 for fine tuning 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 * Calendar "View Render" Callback
* *
@ -1501,128 +1599,26 @@ App.Utils.CalendarDefaultView = (function () {
slotLabelFormat: slotTimeFormat, slotLabelFormat: slotTimeFormat,
allDayContent: lang('all_day'), allDayContent: lang('all_day'),
dayHeaderFormat: columnFormat, dayHeaderFormat: columnFormat,
selectable: true,
selectMirror: true,
headerToolbar: { headerToolbar: {
left: 'prev,next today', left: 'prev,next today',
center: 'title', center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth' 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: { buttonText: {
today: lang('today'), today: lang('today'),
day: lang('day'), day: lang('day'),
week: lang('week'), week: lang('week'),
month: lang('month') month: lang('month')
}, },
// Calendar events need to be declared on initialization.
windowResize: onWindowResize, windowResize: onWindowResize,
datesSet: onDatesSet, datesSet: onDatesSet,
dateClick: onDateClick, dateClick: onDateClick,
eventClick: onEventClick, eventClick: onEventClick,
eventResize: onEventResize, eventResize: onEventResize,
eventDrop: onEventDrop eventDrop: onEventDrop,
select: onSelect
}); });
fullCalendar.render(); fullCalendar.render();
@ -1692,10 +1688,10 @@ App.Utils.CalendarDefaultView = (function () {
// Set the start and end datetime of the appointment. // Set the start and end datetime of the appointment.
const startDatetimeMoment = moment(appointment.start_datetime); 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); 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; const customer = appointment.customer;
$appointmentsModal.find('#customer-id').val(appointment.id_users_customer); $appointmentsModal.find('#customer-id').val(appointment.id_users_customer);

161
assets/js/utils/calendar_table_view.js
View file

@ -46,7 +46,7 @@ App.Utils.CalendarTableView = (function () {
const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const startDate = moment(currentDate).subtract(1, 'days'); const startDate = moment(currentDate).subtract(1, 'days');
const endDate = startDate.clone().add(dayInterval - 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()); createView(startDate.toDate(), endDate.toDate());
}); });
@ -55,7 +55,7 @@ App.Utils.CalendarTableView = (function () {
const currentDate = $selectDate[0]._flatpickr.selectedDates[0]; const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const startDate = moment(currentDate).add(1, 'days'); const startDate = moment(currentDate).add(1, 'days');
const endDate = startDate.clone().add(dayInterval - 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()); createView(startDate.toDate(), endDate.toDate());
}); });
@ -209,10 +209,10 @@ App.Utils.CalendarTableView = (function () {
// Set the start and end datetime of the appointment. // Set the start and end datetime of the appointment.
startMoment = moment(appointment.start_datetime); 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); 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; const customer = appointment.customer;
$appointmentsModal.find('#customer-id').val(appointment.id_users_customer); $appointmentsModal.find('#customer-id').val(appointment.id_users_customer);
@ -249,10 +249,10 @@ App.Utils.CalendarTableView = (function () {
// Apply unavailability data to dialog. // Apply unavailability data to dialog.
$unavailabilitiesModal.find('.modal-header h3').text(lang('edit_unavailability_title')); $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-id').val(unavailability.id);
$unavailabilitiesModal.find('#unavailability-provider').val(unavailability.id_users_provider); $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.find('#unavailability-notes').val(unavailability.notes);
$unavailabilitiesModal.modal('show'); $unavailabilitiesModal.modal('show');
@ -389,7 +389,7 @@ App.Utils.CalendarTableView = (function () {
const endDate = moment(startDate).add(parseInt($selectFilterItem.val()) - 1, 'days').toDate(); const endDate = moment(startDate).add(parseInt($selectFilterItem.val()) - 1, 'days').toDate();
createView(startDate, endDate); createView(startDate, endDate);
} }
}); });
const providers = vars('available_providers').filter( const providers = vars('available_providers').filter(
(provider) => (provider) =>
@ -633,7 +633,7 @@ App.Utils.CalendarTableView = (function () {
*/ */
function getCalendarHeight() { function getCalendarHeight() {
const result = window.innerHeight - $footer.outerHeight() - $header.outerHeight() - 60; // 60 for fine tuning 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) { function createCalendar($providerColumn, goToDate, provider) {
@ -690,60 +690,13 @@ App.Utils.CalendarTableView = (function () {
slotLabelFormat: slotTimeFormat, slotLabelFormat: slotTimeFormat,
allDayContent: lang('all_day'), allDayContent: lang('all_day'),
dayHeaderFormat: columnFormat, dayHeaderFormat: columnFormat,
selectable: true,
selectHelper: true,
headerToolbar: { headerToolbar: {
left: 'listDay,timeGridDay', left: 'listDay,timeGridDay',
center: '', center: '',
right: '' 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: { buttonText: {
today: lang('today'), today: lang('today'),
day: lang('day'), day: lang('day'),
@ -752,12 +705,10 @@ App.Utils.CalendarTableView = (function () {
timeGridDay: lang('calendar'), timeGridDay: lang('calendar'),
listDay: lang('list') listDay: lang('list')
}, },
// Calendar events need to be declared on initialization.
eventClick: onEventClick, eventClick: onEventClick,
eventResize: onEventResize, eventResize: onEventResize,
eventDrop: onEventDrop eventDrop: onEventDrop,
// datesSet: onDatesSet select: onSelect
}); });
fullCalendar.render(); fullCalendar.render();
@ -771,10 +722,6 @@ App.Utils.CalendarTableView = (function () {
}).prependTo($providerColumn); }).prependTo($providerColumn);
} }
// function onDatesSet() {
// $(element).fullCalendar('option', 'height', getCalendarHeight());
// }
function createNonWorkingHours($calendar, provider) { function createNonWorkingHours($calendar, provider) {
const workingPlan = JSON.parse(provider.settings.working_plan); const workingPlan = JSON.parse(provider.settings.working_plan);
const workingPlanExceptions = JSON.parse(provider.settings.working_plan_exceptions) || {}; 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 * Set Table Calendar View
* *
@ -1763,7 +1792,7 @@ App.Utils.CalendarTableView = (function () {
addEventListeners(); 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(); $('#enable-sync, #google-sync').hide();
} }