ifl/iflrandevu
1
1
Fork 0
forked from mirrors/easyappointments
Code Issues 6 Pull requests Releases 3 Activity

Replace the date time pickers in the backend section

Browse source
This commit is contained in:
Alex Tselegidis 2023-02-02 08:54:47 +01:00
parent 629bdfc062
commit 0e0194c927
9 changed files with 71 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
application/views/layouts/backend_layout.php
View file

@ -16,6 +16,7 @@
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/jquery-ui-dist/jquery-ui.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/trumbowyg/trumbowyg.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/select2/select2.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . setting('theme', 'default') . '.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/backend_layout.css') ?>">
@ -49,6 +50,7 @@
<script src="<?= asset_url('assets/vendor/tippy.js/tippy-bundle.umd.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/trumbowyg/trumbowyg.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/select2/select2.min.js') ?>"></script>
<script src="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.js') ?>"></script>
<script src="<?= asset_url('assets/js/app.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>

4
assets/css/general.scss
View file

@ -434,3 +434,7 @@ body .popover-body a {
body .clearfix {
clear: both;
}
.flatpickr-wrapper {
width: 100%;
}

36
assets/js/components/appointments_modal.js
View file

@ -80,8 +80,8 @@ App.Components.AppointmentsModal = (function () {
// ID must exist on the object in order for the model to update the record and not to perform
// an insert operation.
const startDatetime = moment($startDatetime.datetimepicker('getDate')).format('YYYY-MM-DD HH:mm:ss');
const endDatetime = moment($endDatetime.datetimepicker('getDate')).format('YYYY-MM-DD HH:mm:ss');
const startDatetime = moment($startDatetime[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD HH:mm:ss');
const endDatetime = moment($endDatetime[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD HH:mm:ss');
const appointment = {
id_services: $selectService.val(),
@ -194,19 +194,9 @@ App.Components.AppointmentsModal = (function () {
startMoment.add(1, 'hour').set({minutes: 0});
}
$startDatetime.val(
App.Utils.Date.format(startMoment.toDate(), vars('date_format'), vars('time_format'), true)
);
$endDatetime.val(
App.Utils.Date.format(
startMoment.add(duration, 'minutes').toDate(),
vars('date_format'),
vars('time_format'),
true
)
);
$startDatetime[0]._flatpickr.setDate(startMoment.toDate());
$endDatetime[0]._flatpickr.setDate(startMoment.add(duration, 'minutes').toDate());
// Display modal form.
$appointmentsModal.find('.modal-header h3').text(lang('new_appointment_title'));
@ -348,8 +338,8 @@ App.Components.AppointmentsModal = (function () {
const duration = service ? service.duration : 60;
const start = $startDatetime.datetimepicker('getDate');
$endDatetime.datetimepicker('setDate', new Date(start.getTime() + duration * 60000));
const start = $startDatetime[0]._flatpickr.selectedDates[0];
$endDatetime[0]._flatpickr.setDate( new Date(start.getTime() + duration * 60000));
// Update the providers select box.
@ -466,15 +456,15 @@ App.Components.AppointmentsModal = (function () {
(availableService) => Number(availableService.id) === Number(serviceId)
);
const start = $startDatetime.datetimepicker('getDate');
$endDatetime.datetimepicker('setDate', new Date(start.getTime() + service.duration * 60000));
const start = $startDatetime[0]._flatpickr.selectedDates[0];
$endDatetime[0]._flatpickr.setDate( new Date(start.getTime() + service.duration * 60000));
}
});
$startDatetime.datetimepicker('setDate', startDatetime);
$startDatetime[0]._flatpickr.setDate( startDatetime);
App.Utils.UI.initializeDatetimepicker($endDatetime);
$endDatetime.datetimepicker('setDate', endDatetime);
$endDatetime[0]._flatpickr.setDate( endDatetime);
}
/**
@ -511,8 +501,8 @@ App.Components.AppointmentsModal = (function () {
}
// Check appointment start and end time.
const start = $startDatetime.datetimepicker('getDate');
const end = $endDatetime.datetimepicker('getDate');
const start = $startDatetime[0]._flatpickr.selectedDates[0];
const end = $endDatetime[0]._flatpickr.selectedDates[0];
if (start > end) {
$startDatetime.addClass('is-invalid');
$endDatetime.addClass('is-invalid');

24
assets/js/components/unavailabilities_modal.js
View file

@ -55,7 +55,7 @@ App.Components.UnavailabilitiesModal = (function () {
$selectProvider.on('change', () => {
updateTimezone();
});
/**
* Event: Manage Unavailability Dialog Save Button "Click"
*
@ -65,14 +65,14 @@ App.Components.UnavailabilitiesModal = (function () {
$unavailabilitiesModal.find('.modal-message').addClass('d-none');
$unavailabilitiesModal.find('.is-invalid').removeClass('is-invalid');
const startMoment = moment($startDatetime.datetimepicker('getDate'));
const startMoment = moment($startDatetime[0]._flatpickr.selectedDates[0]);
if (!startMoment.isValid()) {
$startDatetime.addClass('is-invalid');
return;
}
const endMoment = moment($endDatetime.datetimepicker('getDate'));
const endMoment = moment($endDatetime[0]._flatpickr.selectedDates[0]);
if (!endMoment.isValid()) {
$endDatetime.addClass('is-invalid');
@ -153,17 +153,9 @@ App.Components.UnavailabilitiesModal = (function () {
$selectProvider.val($selectFilterItem.val()).closest('.form-group').hide();
}
$startDatetime.val(
App.Utils.Date.format(startMoment.toDate(), vars('date_format'), vars('time_format'), true)
);
$endDatetime.val(
App.Utils.Date.format(
startMoment.add(1, 'hour').toDate(),
vars('date_format'),
vars('time_format'),
true
)
);
$startDatetime[0]._flatpickr.setDate(startMoment.toDate())
$endDatetime[0]._flatpickr.setDate(startMoment.add(1, 'hour').toDate());
$dialog.find('.modal-header h3').text(lang('new_unavailability_title'));
$dialog.modal('show');
});
@ -188,8 +180,8 @@ App.Components.UnavailabilitiesModal = (function () {
true
);
App.Utils.UI.initializeDatetimepicker($startDatetime);
App.Utils.UI.initializeDatetimepicker($startDatetime);
$startDatetime.val(start);
App.Utils.UI.initializeDatetimepicker($endDatetime);

24
assets/js/components/working_plan_exceptions_modal.js
View file

@ -43,19 +43,19 @@ App.Components.WorkingPlanExceptionsModal = (function () {
function validate() {
$modal.find('.is-invalid').removeClass('is-invalid');
const date = $date.datepicker('getDate');
const date = $date[0]._flatpickr.selectedDates[0];
if (!date) {
$date.addClass('is-invalid');
}
const start = $start.timepicker('getDate');
const start = $start[0]._flatpickr.selectedDates[0];
if (!start) {
$start.addClass('is-invalid');
}
const end = $end.timepicker('getDate');
const end = $end[0]._flatpickr.selectedDates[0];
if (!end) {
$end.addClass('is-invalid');
@ -120,11 +120,11 @@ App.Components.WorkingPlanExceptionsModal = (function () {
return;
}
const date = moment($date.datepicker('getDate')).format('YYYY-MM-DD');
const date = moment($date[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD');
const workingPlanException = {
start: moment($start.datetimepicker('getDate')).format('HH:mm'),
end: moment($end.datetimepicker('getDate')).format('HH:mm'),
start: moment($start[0]._flatpickr.selectedDates[0]).format('HH:mm'),
end: moment($end[0]._flatpickr.selectedDates[0]).format('HH:mm'),
breaks: getBreaks()
};
@ -181,9 +181,9 @@ App.Components.WorkingPlanExceptionsModal = (function () {
function add() {
deferred = $.Deferred();
$date.datepicker('setDate', new Date());
$start.timepicker('setDate', moment('08:00', 'HH:mm').toDate());
$end.timepicker('setDate', moment('20:00', 'HH:mm').toDate());
$date[0]._flatpickr.setDate( new Date());
$start[0]._flatpickr.setDate( moment('08:00', 'HH:mm').toDate());
$end[0]._flatpickr.setDate( moment('20:00', 'HH:mm').toDate());
$modal.modal('show');
@ -201,9 +201,9 @@ App.Components.WorkingPlanExceptionsModal = (function () {
function edit(date, workingPlanException) {
deferred = $.Deferred();
$date.datepicker('setDate', moment(date, 'YYYY-MM-DD').toDate());
$start.timepicker('setDate', moment(workingPlanException.start, 'HH:mm').toDate());
$end.timepicker('setDate', moment(workingPlanException.end, 'HH:mm').toDate());
$date[0]._flatpickr.setDate( moment(date, 'YYYY-MM-DD').toDate());
$start[0]._flatpickr.setDate( moment(workingPlanException.start, 'HH:mm').toDate());
$end[0]._flatpickr.setDate( moment(workingPlanException.end, 'HH:mm').toDate());
workingPlanException.breaks.forEach((workingPlanExceptionBreak) => {
renderBreakRow(workingPlanExceptionBreak).appendTo($breaks.find('tbody'));

2
assets/js/http/booking_http_client.js
View file

@ -281,7 +281,7 @@ App.Http.Booking = (function () {
for (let i = 1; i <= numberOfDays; i++) {
const currentDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), i);
if (unavailableDates.indexOf(moment(currentDate).format('YYYY-MM-DD')) === -1) {
$('#select-date').datepicker('setDate', currentDate);
$('#select-date')[0]._flatpickr.setDate( currentDate);
getAvailableHours(moment(currentDate).format('YYYY-MM-DD'));
break;
}

16
assets/js/pages/booking.js
View file

@ -135,7 +135,7 @@ App.Pages.Booking = (function () {
closeText: lang('close'),
onSelect: () => {
App.Http.Booking.getAvailableHours(moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD'));
App.Http.Booking.getAvailableHours(moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'));
updateConfirmFrame();
},
@ -252,7 +252,7 @@ App.Pages.Booking = (function () {
* Event: Timezone "Changed"
*/
$selectTimezone.on('change', () => {
const date = $selectDate.datepicker('getDate');
const date = $selectDate[0]._flatpickr.selectedDates[0];
if (!date) {
return;
@ -274,7 +274,7 @@ App.Pages.Booking = (function () {
App.Http.Booking.getUnavailableDates(
$target.val(),
$selectService.val(),
moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD')
moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD')
);
updateConfirmFrame();
});
@ -310,7 +310,7 @@ App.Pages.Booking = (function () {
App.Http.Booking.getUnavailableDates(
$selectProvider.val(),
$target.val(),
moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD')
moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD')
);
updateConfirmFrame();
@ -576,7 +576,7 @@ App.Pages.Booking = (function () {
}
// Appointment Details
let selectedDate = $selectDate.datepicker('getDate');
let selectedDate = $selectDate[0]._flatpickr.selectedDates[0];
if (selectedDate !== null) {
selectedDate = App.Utils.Date.format(selectedDate, vars('date_format'), vars('time_format'));
@ -708,7 +708,7 @@ App.Pages.Booking = (function () {
data.appointment = {
start_datetime:
moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD') +
moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD') +
' ' +
moment($('.selected-hour').data('value'), 'HH:mm').format('HH:mm') +
':00',
@ -744,7 +744,7 @@ App.Pages.Booking = (function () {
);
// Add the duration to the start datetime.
const selectedDate = moment($selectDate.datepicker('getDate')).format('YYYY-MM-DD');
const selectedDate = moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD');
const selectedHour = $('.selected-hour').data('value'); // HH:mm
@ -779,7 +779,7 @@ App.Pages.Booking = (function () {
// Set Appointment Date
const startMoment = moment(appointment.start_datetime);
$selectDate.datepicker('setDate', startMoment.toDate());
$selectDate[0]._flatpickr.setDate( startMoment.toDate());
App.Http.Booking.getAvailableHours(startMoment.format('YYYY-MM-DD'));
// Apply Customer's Data

22
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.
startMoment = moment(appointment.start_datetime);
$appointmentsModal.find('#start-datetime').datetimepicker('setDate', startMoment.toDate());
$appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate( startMoment.toDate());
endMoment = moment(appointment.end_datetime);
$appointmentsModal.find('#end-datetime').datetimepicker('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').datetimepicker('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').datetimepicker('setDate', endMoment.toDate());
$unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate( endMoment.toDate());
$unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes);
$unavailabilitiesModal.modal('show');
}
@ -1540,9 +1540,9 @@ App.Utils.CalendarDefaultView = (function () {
$('#unavailability-provider').trigger('change');
$('#unavailability-start').datepicker('setDate', info.start);
$('#unavailability-start')[0]._flatpickr.setDate( info.start);
$('#unavailability-end').datepicker('setDate', info.end);
$('#unavailability-end')[0]._flatpickr.setDate( info.end);
$('#message-box').dialog('close');
}
@ -1598,10 +1598,10 @@ App.Utils.CalendarDefaultView = (function () {
}
// Preselect time
$('#start-datetime').datepicker('setDate', info.start);
$('#end-datetime').datepicker('setDate', App.Pages.Calendar.getSelectionEndDate(info));
$('#start-datetime')[0]._flatpickr.setDate( info.start);
$('#end-datetime')[0]._flatpickr.setDate( App.Pages.Calendar.getSelectionEndDate(info));
// $('#end-datetime').datepicker('setDate', info.end);
// $('#end-datetime')[0]._flatpickr.setDate( info.end);
$('#message-box').dialog('close');
}
}
@ -1695,10 +1695,10 @@ App.Utils.CalendarDefaultView = (function () {
// Set the start and end datetime of the appointment.
const startDatetimeMoment = moment(appointment.start_datetime);
$appointmentsModal.find('#start-datetime').datetimepicker('setDate', startDatetimeMoment.toDate());
$appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate( startDatetimeMoment.toDate());
const endDatetimeMoment = moment(appointment.end_datetime);
$appointmentsModal.find('#end-datetime').datetimepicker('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);

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

@ -43,25 +43,25 @@ App.Utils.CalendarTableView = (function () {
function addEventListeners() {
$calendar.on('click', '.calendar-header .btn.previous', () => {
const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate.datepicker('getDate');
const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const startDate = moment(currentDate).subtract(1, 'days');
const endDate = startDate.clone().add(dayInterval - 1, 'days');
$selectDate.datepicker('setDate', startDate.toDate());
$selectDate[0]._flatpickr.setDate( startDate.toDate());
createView(startDate.toDate(), endDate.toDate());
});
$calendar.on('click', '.calendar-header .btn.next', () => {
const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate.datepicker('getDate');
const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const startDate = moment(currentDate).add(1, 'days');
const endDate = startDate.clone().add(dayInterval - 1, 'days');
$selectDate.datepicker('setDate', startDate.toDate());
$selectDate[0]._flatpickr.setDate( startDate.toDate());
createView(startDate.toDate(), endDate.toDate());
});
$calendarToolbar.on('change', '#select-filter-item', () => {
const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate.datepicker('getDate');
const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const startDate = moment(currentDate);
const endDate = startDate.clone().add(dayInterval - 1, 'days');
createView(startDate.toDate(), endDate.toDate());
@ -70,7 +70,7 @@ App.Utils.CalendarTableView = (function () {
$calendarToolbar.on('click', '#reload-appointments', () => {
// Fetch the events and place them in the existing HTML format.
const dayInterval = $selectFilterItem.val();
const currentDate = $selectDate.datepicker('getDate');
const currentDate = $selectDate[0]._flatpickr.selectedDates[0];
const startDateMoment = moment(currentDate);
const startDate = startDateMoment.toDate();
const endDateMoment = startDateMoment.clone().add(dayInterval - 1, 'days');
@ -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').datetimepicker('setDate', startMoment.toDate());
$appointmentsModal.find('#start-datetime')[0]._flatpickr.setDate( startMoment.toDate());
endMoment = moment(appointment.end_datetime);
$appointmentsModal.find('#end-datetime').datetimepicker('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').datetimepicker('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').datetimepicker('setDate', endMoment.toDate());
$unavailabilitiesModal.find('#unavailability-end')[0]._flatpickr.setDate( endMoment.toDate());
$unavailabilitiesModal.find('#unavailability-notes').val(unavailability.notes);
$unavailabilitiesModal.modal('show');
@ -786,8 +786,8 @@ App.Utils.CalendarTableView = (function () {
$selectProvider.trigger('change');
// Preselect time
$('#start-datetime').datepicker('setDate', info.start);
$('#end-datetime').datepicker('setDate', App.Pages.Calendar.getSelectionEndDate(info));
$('#start-datetime')[0]._flatpickr.setDate( info.start);
$('#end-datetime')[0]._flatpickr.setDate( App.Pages.Calendar.getSelectionEndDate(info));
return false;
},