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

Code refactoring and improvements for the unavailabilities modal component.

Browse source
This commit is contained in:
Alex Tselegidis 2022-01-17 04:46:18 +01:00
parent fe7d6de462
commit 1ebc50893e
3 changed files with 68 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
application/views/components/unavailabilities_modal.php
View file

@ -17,29 +17,29 @@
<form> <form>
<fieldset> <fieldset>
<input id="unavailable-id" type="hidden"> <input id="unavailability-id" type="hidden">
<div class="mb-3"> <div class="mb-3">
<label for="unavailable-provider" class="form-label"> <label for="unavailability-provider" class="form-label">
<?= lang('provider') ?> <?= lang('provider') ?>
</label> </label>
<select id="unavailable-provider" class="form-control"></select> <select id="unavailability-provider" class="form-control"></select>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="unavailable-start" class="form-label"> <label for="unavailability-start" class="form-label">
<?= lang('start') ?> <?= lang('start') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>
</label> </label>
<input id="unavailable-start" class="form-control"> <input id="unavailability-start" class="form-control">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="unavailable-end" class="form-label"> <label for="unavailability-end" class="form-label">
<?= lang('end') ?> <?= lang('end') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>
</label> </label>
<input id="unavailable-end" class="form-control"> <input id="unavailability-end" class="form-control">
</div> </div>
<div class="mb-3"> <div class="mb-3">
@ -62,10 +62,10 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="unavailable-notes" class="form-label"> <label for="unavailability-notes" class="form-label">
<?= lang('notes') ?> <?= lang('notes') ?>
</label> </label>
<textarea id="unavailable-notes" rows="3" class="form-control"></textarea> <textarea id="unavailability-notes" rows="3" class="form-control"></textarea>
</div> </div>
</fieldset> </fieldset>
</form> </form>
@ -75,7 +75,7 @@
<i class="fas fa-ban"></i> <i class="fas fa-ban"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
<button id="save-unavailable" class="btn btn-primary"> <button id="save-unavailability" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>

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

@ -17,60 +17,70 @@
* Old Name: BackendCalendarUnavailabilityEventsModal * Old Name: BackendCalendarUnavailabilityEventsModal
*/ */
App.Components.UnavailabilitiesModal = (function () { App.Components.UnavailabilitiesModal = (function () {
const $unavailabilitiesModal = $('#unavailabilities-modal');
const $unavailabilityId = $('#unavailability-id');
const $unavailabilityStart = $('#unavailability-start');
const $unavailabilityEnd = $('#unavailability-end');
const $unavailabilityProvider = $('#unavailability-provider');
const $unavailabilityNotes = $('#unavailability-notes');
const $saveUnavailability = $('#save-unavailability');
const $insertUnavailability = $('#insert-unavailability');
const $selectFilterItem = $('#select-filter-item');
/** /**
* Bind the event handlers. * Add the component event listeners.
*/ */
function bindEventHandlers() { function addEventListeners() {
/** /**
* Event: Manage Unavailable Dialog Save Button "Click" * Event: Manage Unavailable Dialog Save Button "Click"
* *
* Stores the unavailable period changes or inserts a new record. * Stores the unavailable period changes or inserts a new record.
*/ */
$('#unavailabilities-modal #save-unavailable').on('click', () => { $saveUnavailability.on('click', () => {
const $dialog = $('#unavailabilities-modal'); $unavailabilitiesModal.find('.modal-message').addClass('d-none');
$dialog.find('.modal-message').addClass('d-none'); $unavailabilitiesModal.find('.is-invalid').removeClass('is-invalid');
$dialog.find('.is-invalid').removeClass('is-invalid');
const startMoment = moment($dialog.find('#unavailable-start').datetimepicker('getDate')); const startMoment = moment($unavailabilityStart.datetimepicker('getDate'));
if (!startMoment.isValid()) { if (!startMoment.isValid()) {
$dialog.find('#unavailable-start').addClass('is-invalid'); $unavailabilityStart.addClass('is-invalid');
return; return;
} }
const endMoment = moment($dialog.find('#unavailable-end').datetimepicker('getDate')); const endMoment = moment($unavailabilityEnd.datetimepicker('getDate'));
if (!endMoment.isValid()) { if (!endMoment.isValid()) {
$dialog.find('#unavailable-end').addClass('is-invalid'); $unavailabilityEnd.addClass('is-invalid');
return; return;
} }
if (startMoment.isAfter(endMoment)) { if (startMoment.isAfter(endMoment)) {
// Start time is after end time - display message to user. // Start time is after end time - display message to user.
$dialog $unavailabilitiesModal
.find('.modal-message') .find('.modal-message')
.text(App.Lang.start_date_before_end_error) .text(App.Lang.start_date_before_end_error)
.addClass('alert-danger') .addClass('alert-danger')
.removeClass('d-none'); .removeClass('d-none');
$dialog.find('#unavailable-start, #unavailable-end').addClass('is-invalid'); $unavailabilityStart.addClass('is-invalid');
$unavailabilityEnd.addClass('is-invalid');
return; return;
} }
// Unavailable period records go to the appointments table. // Unavailable period records go to the appointments table.
const unavailable = { const unavailability = {
start_datetime: startMoment.format('YYYY-MM-DD HH:mm:ss'), start_datetime: startMoment.format('YYYY-MM-DD HH:mm:ss'),
end_datetime: endMoment.format('YYYY-MM-DD HH:mm:ss'), end_datetime: endMoment.format('YYYY-MM-DD HH:mm:ss'),
notes: $dialog.find('#unavailable-notes').val(), notes: $unavailabilitiesModal.find('#unavailability-notes').val(),
id_users_provider: $('#unavailable-provider').val() id_users_provider: $('#unavailability-provider').val()
}; };
if ($dialog.find('#unavailable-id').val() !== '') { if ($unavailabilityId.val() !== '') {
// Set the id value, only if we are editing an appointment. // Set the id value, only if we are editing an appointment.
unavailable.id = $dialog.find('#unavailable-id').val(); unavailability.id = $unavailabilityId.val();
} }
const successCallback = () => { const successCallback = () => {
@ -78,14 +88,14 @@ App.Components.UnavailabilitiesModal = (function () {
Backend.displayNotification(App.Lang.unavailable_saved); Backend.displayNotification(App.Lang.unavailable_saved);
// Close the modal dialog and refresh the calendar appointments. // Close the modal dialog and refresh the calendar appointments.
$dialog.find('.alert').addClass('d-none'); $unavailabilitiesModal.find('.alert').addClass('d-none');
$dialog.modal('hide'); $unavailabilitiesModal.modal('hide');
$('#select-filter-item').trigger('change'); $selectFilterItem.trigger('change');
}; };
App.Http.Calendar.saveUnavailable(unavailable, successCallback, null); App.Http.Calendar.saveUnavailable(unavailability, successCallback, null);
}); });
/** /**
@ -94,8 +104,8 @@ App.Components.UnavailabilitiesModal = (function () {
* When the user clicks this button a popup dialog appears and the use can set a time period where * When the user clicks this button a popup dialog appears and the use can set a time period where
* he cannot accept any appointments. * he cannot accept any appointments.
*/ */
$('#insert-unavailable').on('click', () => { $insertUnavailability.on('click', () => {
resetUnavailableDialog(); resetModal();
const $dialog = $('#unavailabilities-modal'); const $dialog = $('#unavailabilities-modal');
@ -115,22 +125,20 @@ App.Components.UnavailabilitiesModal = (function () {
} }
if ($('.calendar-view').length === 0) { if ($('.calendar-view').length === 0) {
$dialog.find('#unavailable-provider').val($('#select-filter-item').val()).closest('.form-group').hide(); $unavailabilityProvider.val($selectFilterItem.val()).closest('.form-group').hide();
} }
$dialog $unavailabilityStart.val(
.find('#unavailable-start') App.Utils.Date.format(startMoment.toDate(), App.Vars.date_format, App.Vars.time_format, true)
.val(App.Utils.Date.format(startMoment.toDate(), App.Vars.date_format, App.Vars.time_format, true)); );
$dialog $unavailabilityEnd.val(
.find('#unavailable-end') App.Utils.Date.format(
.val( startMoment.add(1, 'hour').toDate(),
App.Utils.Date.format( App.Vars.date_format,
startMoment.add(1, 'hour').toDate(), App.Vars.time_format,
App.Vars.date_format, true
App.Vars.time_format, )
true );
)
);
$dialog.find('.modal-header h3').text(App.Lang.new_unavailable_title); $dialog.find('.modal-header h3').text(App.Lang.new_unavailable_title);
$dialog.modal('show'); $dialog.modal('show');
}); });
@ -142,10 +150,8 @@ App.Components.UnavailabilitiesModal = (function () {
* Reset the "#unavailabilities-modal" dialog. Use this method to bring the dialog to the initial state * Reset the "#unavailabilities-modal" dialog. Use this method to bring the dialog to the initial state
* before it becomes visible to the user. * before it becomes visible to the user.
*/ */
function resetUnavailableDialog() { function resetModal() {
const $dialog = $('#unavailabilities-modal'); $unavailabilityId.val('');
$dialog.find('#unavailable-id').val('');
// Set default time values // Set default time values
const start = App.Utils.Date.format(moment().toDate(), App.Vars.date_format, App.Vars.time_format, true); const start = App.Utils.Date.format(moment().toDate(), App.Vars.date_format, App.Vars.time_format, true);
@ -175,7 +181,7 @@ App.Components.UnavailabilitiesModal = (function () {
const firstWeekdayId = App.Utils.Date.getWeekdayId(firstWeekday); const firstWeekdayId = App.Utils.Date.getWeekdayId(firstWeekday);
$dialog.find('#unavailable-start').datetimepicker({ $unavailabilityStart.datetimepicker({
dateFormat: dateFormat, dateFormat: dateFormat,
timeFormat: App.Vars.time_format === 'regular' ? 'h:mm tt' : 'HH:mm', timeFormat: App.Vars.time_format === 'regular' ? 'h:mm tt' : 'HH:mm',
@ -231,9 +237,9 @@ App.Components.UnavailabilitiesModal = (function () {
minuteText: App.Lang.minutes, minuteText: App.Lang.minutes,
firstDay: firstWeekdayId firstDay: firstWeekdayId
}); });
$dialog.find('#unavailable-start').val(start); $unavailabilityStart.val(start);
$dialog.find('#unavailable-end').datetimepicker({ $unavailabilityEnd.datetimepicker({
dateFormat: dateFormat, dateFormat: dateFormat,
timeFormat: App.Vars.time_format === 'regular' ? 'h:mm tt' : 'HH:mm', timeFormat: App.Vars.time_format === 'regular' ? 'h:mm tt' : 'HH:mm',
@ -289,29 +295,29 @@ App.Components.UnavailabilitiesModal = (function () {
minuteText: App.Lang.minutes, minuteText: App.Lang.minutes,
firstDay: firstWeekdayId firstDay: firstWeekdayId
}); });
$dialog.find('#unavailable-end').val(end); $unavailabilityEnd.val(end);
// Clear the unavailable notes field. // Clear the unavailable notes field.
$dialog.find('#unavailable-notes').val(''); $unavailabilityNotes.val('');
} }
/** /**
* Initialize the module. * Initialize the module.
*/ */
function initialize() { function initialize() {
const $unavailabilityProvider = $('#unavailable-provider');
for (const index in App.Vars.available_providers) { for (const index in App.Vars.available_providers) {
const provider = App.Vars.available_providers[index]; const provider = App.Vars.available_providers[index];
$unavailabilityProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id)); $unavailabilityProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
} }
bindEventHandlers(); addEventListeners();
} }
document.addEventListener('DOMContentLoaded', initialize);
return { return {
resetUnavailableDialog, resetModal,
initialize initialize
}; };
})(); })();

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

@ -144,7 +144,7 @@ App.Utils.CalendarDefaultView = (function () {
endMoment = moment(unavailable.end_datetime); endMoment = moment(unavailable.end_datetime);
$dialog = $('#unavailabilities-modal'); $dialog = $('#unavailabilities-modal');
App.Components.UnavailabilitiesModal.resetUnavailableDialog(); App.Components.UnavailabilitiesModal.resetModal();
// Apply unavailable data to dialog. // Apply unavailable data to dialog.
$dialog.find('.modal-header h3').text('Edit Unavailable Period'); $dialog.find('.modal-header h3').text('Edit Unavailable Period');